/**
 * create by young (young2f@outlook.com) on 2020/9/16
 */


'use strict';
import React from 'react';
import {Button, DatePicker, Form, InputNumber, notification, Tag} from 'antd';

import {FormField, FormLayout, ModalFooter} from 'antd-extra';
import FormBase from '../../../components/Base/FormBase';
import moment from 'moment';
import 'moment/locale/zh-cn';
import {connect} from "dva";
import TextArea from "antd/es/input/TextArea";

moment.locale('zh-cn');

@Form.create()
@connect(({user, global, work}) => ({...user, ...work, ...global}))
export default class ModalCreateOrEditRelationWork extends FormBase {
  constructor(props) {
    super(props);
    this.state = {workList: []};
  }

  componentDidMount() {
    this.props.dispatch({
      type: 'user/findUsers',
      payload: {table: 'users'}
    });
  }

  renderFoot = () => {
    const {foot, value, modalRef, callback, table, form} = this.props;
    const model = this.props[`${table}Model`];
    if (foot) {
      return foot(value, modalRef);
    } else {
      return (
        <ModalFooter>
          <Button type="primary" onClick={() => {
            form.validateFields((err, values) => {
              if (err) {
                const {code} = err;
                const {errors} = code;
                errors.forEach(item => {
                  notification.error(item);
                });
                return;
              }
              _.merge(values, this.state);
              callback(values);
              modalRef.close();
            });
          }}>确定</Button>
          <Button onClick={() => {
            modalRef.close();
          }}>取消</Button>
        </ModalFooter>
      );
    }
  };
  columns = () => {
    const temp = [];
    temp.push(
      {title: '任务编码', dataIndex: 'code', key: 'code'},
      {title: '创建人', dataIndex: 'createUsername', key: 'createUsername'},
      {title: '责任人', dataIndex: 'username', key: 'username'},
      {title: '事项', dataIndex: 'desc', key: 'desc', ellipsis: true},
      {
        title: '要求完成时间',
        dataIndex: 'requiredCompletionDate',
        key: 'requiredCompletionDate',
        render: (text, record) => {
          return text ? <div>{moment(text).format('YYYY-MM-DD')}</div> : <div></div>;
        }
      },
      {
        title: '实际完成时间',
        dataIndex: 'completionDate',
        key: 'completionDate',
        render: (text, record) => {
          return text ? <div>{moment(text).format('YYYY-MM-DD')}</div> : <div></div>;
        }
      },
      {
        title: '完成情况',
        dataIndex: 'completionDesc',
        key: 'completionDesc', ellipsis: true
      },

      {
        title: '是否逾期', dataIndex: 'isOverdue', key: 'isOverdue',
        render: (value, record) => {
          const {completionDate, requiredCompletionDate} = record;
          const day1 = moment(requiredCompletionDate).format('YYYY-MM-DD');
          const day2 = moment().format('YYYY-MM-DD');

          const _str = moment(day2).valueOf() > moment(day1).valueOf() ? <Tag color={'#f00'}>已逾期</Tag> :
            <Tag color={'#00f'}>未逾期</Tag>;
          let str = completionDate ? <Tag color={'#0f0'}>已完成</Tag> : _str;
          return <div>{str}</div>;
        }
      }, {
        title: '是否完成', dataIndex: 'isEnded', key: 'isEnded',
        render: (value, record) => {
          const {completionDate} = record;
          return completionDate ? <Tag color={'#0f0'}>是</Tag> : <Tag color={'#555'}>否</Tag>;
        }
      }
      // {
      //   title: '操作', dataIndex: 'operation', key: 'operation',
      //   width: 220, fixed: 'right',
      //   render: (value, record) => {
      //     const {code,createUser} = record;
      //     return (
      //       <span>
      //              {<a style={{marginRight: '6px'}}
      //                  onClick={() => {
      //                    this.setState({showDetail: true, record});
      //                  }}
      //              >详情</a>}
      //         {<a style={{marginRight: '6px'}} disabled={createUser!==username}
      //             onClick={() => this.onCreateOrEdit(record)}
      //         >编辑</a>}
      //         {<Popconfirm
      //           title="确认删除"
      //           onConfirm={() => {
      //             this.props.dispatch({
      //               type: 'work/deleteWork',
      //               payload: {code}
      //             }).then(res => {
      //               this.requestReturn(res);
      //               this.componentDidMount();
      //             });
      //           }}
      //           okText="是"
      //           cancelText="否"
      //         >
      //           <a disabled={createUser!==username}>删除</a>
      //         </Popconfirm>}
      //       </span>
      //     );
      //   }
      // }
    );

    return temp;
  };

  render() {
    let {form, footDisabled, style, table, values, work = {}, users = [], cols = 2, showCreate = false} = this.props;
    const loginInfo = this.getLoginInfo();
    const {userType} = loginInfo;
    const {workList} = work;

    const model = this.props[`${table}Model`];

    if (!model) return <div></div>;
    values = values ? values : {code: this.getCode('WRK')};
    const {
      code,
      username,
      nickname,
      desc,
      requiredCompletionDate = this.props.requiredCompletionDate,
      completionDate,
      completionDesc,
      rewardsPunishment,
      memo,
      isEnded = '否',
      fileList
    } = values;

    return (
      <div style={{...style}}>
        {<FormLayout form={form} cols={1}>
          <FormField
            label={'工作编码'}
            name={'code'}
            required={true}
            disabled={true}
            initialValue={code}
          >
            <InputNumber disabled={true} style={{width: '100%'}}
            ></InputNumber>
          </FormField>
          <FormField
            label={'事项'}
            name={'desc'}
            required={true}
            initialValue={desc}
          >
            <TextArea style={{width: '100%'}}
            ></TextArea>
          </FormField>
          <FormField
            label={'要求完成日期'}
            name={'requiredCompletionDate'}
            required={true}
            initialValue={moment(requiredCompletionDate)}
          >
            <DatePicker style={{width: '100%'}}
            ></DatePicker>
          </FormField>
          {/*<FormField*/}
          {/*  label={'实际完成日期'}*/}
          {/*  name={'completionDate'}*/}
          {/*  initialValue={completionDate ? moment(completionDate) : undefined}*/}
          {/*>*/}
          {/*  <DatePicker style={{width: '100%'}}*/}
          {/*  ></DatePicker>*/}
          {/*</FormField>*/}
          {/*<FormField*/}
          {/*  label={'完成情况'}*/}
          {/*  name={'completionDesc'}*/}

          {/*  initialValue={completionDesc}*/}
          {/*>*/}
          {/*  <TextArea style={{width: '100%'}}*/}
          {/*  ></TextArea>*/}
          {/*</FormField>*/}

          <FormField
            label={'备注'}
            name={'memo'}
            initialValue={memo}
          >
            <TextArea style={{width: '100%'}}
            ></TextArea>
          </FormField>
        </FormLayout>

        }
        {showCreate&& <ViewTitle
          title={'分配工作任务列表'}
          level={1}
          actions={<Button type={'primary'} onClick={() => {
            ModalView.open(ModalCreateOrEditTask,
              {
                title: '分配任务',
                width: '920px'
              }, {
                table,
                callback: (payload) => {
                  payload.workCode = code;
                  this.props.dispatch({
                    type: 'work/createWork',
                    payload
                  }).then(res => {
                    this.requestReturn(res);
                    this.componentDidMount();
                  });
                }
              });
          }}>添加</Button>}
        ></ViewTitle>}
        {showCreate && <Table
          className={styles.antTable}
          bordered={true}
          columns={this.columns()}
          dataSource={workList}
          // scroll={{x: true}}
          pagination={{
            current: this.state.current,
            total: this.state.total,
            showSizeChanger: true,
            onChange: page => {
              this.state.current = page;
              this.componentDidMount();
            },
            onShowSizeChange: (current, pageSize) => {
              this.state.current = 1;
              this.state.pageSize = pageSize;
              this.componentDidMount();
            }
          }}
        ></Table>}
        {!footDisabled && this.renderFoot()}
      </div>
    );
  }
}

